<script lang="ts" setup>
import { ref, onMounted, defineProps } from "vue"
import Atropos from "atropos"

const props = defineProps<{
  suffix: string
}>()

let myAtropos
const init = () => {
  // Initialize
  myAtropos = Atropos({
    el: `.my-atropos-${props.suffix}`,
    // rest of parameters
  })
}

onMounted(init)
</script>

<template>
  <!-- main Atropos container (required), add your custom class here -->
  <div class="atropos" :class="[`my-atropos-${suffix}`]" draggable>
    <!-- scale container (required) -->
    <div class="atropos-scale">
      <!-- rotate container (required) -->
      <div class="atropos-rotate">
        <!-- inner container (required) -->
        <div class="atropos-inner">
          <!-- put your custom content here -->
          <slot></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import "atropos/scss";
</style>
